<template>
    <h2>侦听器使用</h2>
    {{ msg }}
    <button @click="ChangeMsg">Count++</button>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";

const msg = ref(0);

const ChangeMsg = () => {
    msg.value++;
}

//创建侦听器用于监视msg数据
//它之所以叫侦听器，是因为它可以侦听一个或多个响应式数据源数据，并再数据源变化时调用所给的回调函数。
// 就是你传给watch侦听器一个响应式变量，然后当这个变量变化时，自动触发一个你定义的函数，
// 就像一个人被监控了一样，只要这个人一动，摄像头就会报警
//watch(source, callback, options)  1.source:你要监听的数据 2.callback:当数据变化时，要执行的函数 3.options:配置项(选填项)
//immediate:声明侦听器首次完成数据加载，默认是惰性的   deep: true：将侦听器设置为深层侦听器

watch(msg, (newValue, oldValue) => {
    if (newValue === 5) {
        alert('成功');
    }
    console.log('新值：' + newValue + '旧值：' + oldValue);
}),
    { immediate: true }

</script>